<!--首页-->
<template>
  <div class="dashboard-editor-container" v-loading="loading">
    <panel-group @handleSetLineChartData="handleSetLineChartData"/>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart ref="lineChart" :height="'350px'" :chartData="lineData"/>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <radar-chart ref="radarChart" :height="'350px'" :chartData="radarData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart ref="pieChart" :height="'350px'" :chartData="pieData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <map-chart ref="mapChart" :height="'350px'" :chartData="mapData"/>
        </div>
      </el-col>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-bar-chart ref="lineBarChart" :height="'350px'" :chartData="lineBarData"/>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import LineBarChart from './dashboard/LineBarChart.vue'
import RadarChart from './dashboard/RadarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import MapChart from './dashboard/MapChart.vue'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RadarChart,
    PieChart,
    BarChart,
    MapChart,
    LineBarChart
  },
  data() {
    return {
      lineData:{
        //右侧工具箱
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          data: [ '周四', '周五', '周六', '周日','周一', '周二', '周三'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['数据1', '数据2']
        },
        series: [{
          name: '数据1',
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: [1000, 2*1000, 3*1000, 4*1000, 5*1000, 10*1000, 6*1000],
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
          {
            name: '数据2',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#5ab1ef'
                }
              }
            },
            data: [4*1000, 6*1000, 8*1000, 10*1000, 4*1000, 2*1000, 2*1000],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
      },
      radarData:{
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //右侧工具箱
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        radar: {
          radius: '66%',
          center: ['50%', '42%'],
          splitNumber: 5,
          splitArea: {
            areaStyle: {
              color: 'rgba(127,95,132,.3)',
              opacity: 0.5,
              shadowBlur: 45,
              shadowColor: 'rgba(0,0,0,.5)',
              shadowOffsetX: 0,
              shadowOffsetY: 15
            }
          },
          name: {
            lineHeight: 12,
            formatter: (labelName, raw) => {
              return (
                  labelName
              );
            },
          },
          indicator: [
            { name: '维度1', max: 10000 },
            { name: '维度2', max: 10000 },
            { name: '维度3', max: 10000 },
            { name: '维度4', max: 10000 },
            { name: '维度5', max: 10000 },
            { name: '维度6', max: 10000 }
          ],
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: ['数据1', '数据2', '数据3']
        },
        series: [
          {
            type: 'radar',
            symbolSize: 5,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: 'rgba(0,0,0,.2)',
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 0.5
              }
            },
            data: [
              {
                value: [10*1000, 9*1000, 5*1000, 2*1000, 3*1000, 1*1000],
                name: '数据1'
              },
              {
                value: [2*1000, 6*1000, 4*1000, 8*1000, 6*1000, 3*1000],
                name: '数据2'
              },
              {
                value: [7*1000, 9*1000, 1*1000, 5*1000, 5*1000, 3*1000],
                name: '数据3'
              }
            ],
            animationDuration: 3000
          }]
      },
      pieData:{
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        //右侧工具箱
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend:  {
          left: 'center',
          bottom: '10',
          data: ['数据1', '数据2', '数据3', '数据4', '数据5']
        },
        series: [
          {
            name: '名称',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '38%'],
            data: [
              { value: 5*1000, name: '数据1' },
              { value: 3*1000, name: '数据2' },
              { value: 2*1000, name: '数据3' },
              { value: 4*1000, name: '数据4' },
              { value: 10*1000, name: '数据5' }
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 1000
          }
        ]
      },
      barData:{
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //右侧工具箱
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: 'pageA',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [79, 52, 200, 334, 390, 330, 220],
          animationDuration:1000
        }, {
          name: 'pageB',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [80, 52, 200, 334, 390, 330, 220],
          animationDuration:1000
        }, {
          name: 'pageC',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [30, 52, 200, 334, 390, 330, 220],
          animationDuration:1000
        }]
      },
      mapData:[
        { name: '北京市', value: 7 * 1000 },
        { name: '天津市', value: 6 * 1000 },
        { name: '上海市', value: 10 * 1000 },
        { name: '重庆市', value: 20 * 1000 },
        { name: '河北省', value: 40 * 1000 },
        { name: '河南省', value: 80 * 1000 },
        { name: '云南省', value: 60 * 1000 },
        { name: '辽宁省', value: 3 * 1000 },
        { name: '黑龙江省', value: 6 * 1000 },
        { name: '湖南省', value: 9 * 1000 },
        { name: '安徽省', value: 6 * 1000 },
        { name: '山东省', value: 7 * 1000 },
        { name: '新疆维吾尔自治区', value: 5 * 1000 },
        { name: '江苏省', value: 6 * 1000 },
        { name: '浙江省', value: 4 * 1000 },
        { name: '江西省', value: 80 * 1000 },
        { name: '湖北省', value: 50 * 1000 },
        { name: '广西壮族自治区', value: 30 * 1000 },
        { name: '甘肃省', value: 20 * 1000 },
        { name: '山西省', value: 10 * 1000 },
        { name: '内蒙古自治区', value: 44 * 1000 },
        { name: '陕西省', value: 66 * 1000 },
        { name: '吉林省', value: 88 * 1000 },
        { name: '福建省', value: 22 * 1000 },
        { name: '贵州省', value: 11 * 1000 },
        { name: '广东省', value: 33 * 1000 },
        { name: '青海省', value: 15 * 1000 },
        { name: '西藏自治区', value: 18 * 1000 },
        { name: '四川省', value: 20 * 1000 },
        { name: '成都市', value: 70 * 1000 },
        { name: '宁夏回族自治区', value: 60 * 1000 },
        { name: '海南省', value: 100 * 1000 },
        { name: '台湾省', value: 60 * 1000 },
        { name: '香港特别行政区', value: 40 * 1000 },
        { name: '澳门特别行政区', value: 40 * 1000 }
      ],
      lineBarData:{
        //y轴标题
        yTitle: [{
          type: 'value',
          name: '指标1',
          axisLabel: {
            formatter: '{value} ml'
          }
        },
          {
            type: 'value',
            name: '指标3',
            axisLabel: {
              formatter: '{value} °C'
            }
          }],
        //x轴标题
        xTitle: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        //数据项
        dataTitle: ['指标1', '指标2', '指标3', '指标4'],
        //统计数据
        series: [
          {
            name: '指标1',
            type: 'bar',
            stack: 'Ad',
            label: {
              show: true,
              formatter: (params) => parseInt(params.value)
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              8 * 1000, 7 * 1000, 5 * 1000, 10 * 1000, 6 * 1000, 3 * 1000, 5 * 1000
            ]
          },
          {
            name: '指标2',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C'
              }
            },
            data: [
              1 * 100, 7 * 100, 8 * 100, 5 * 100, 4 * 100, 2 * 100, 3 * 100
            ]
          },
          {
            name: '指标3',
            type: 'bar',
            stack: 'Ad',
            label: {
              show: true,
              formatter: (params) => parseInt(params.value)
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              7 * 1000, 8 * 1000, 6 * 1000, 8 * 1000, 9 * 1000, 6 * 1000, 9 * 1000
            ]
          },
          {
            name: '指标4',
            type: 'bar',
            label: {
              show: true,
              formatter: (params) => parseInt(params.value)
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              8 * 1000, 6 * 1000, 7 * 1000, 5 * 1000, 6 * 1000, 4 * 1000, 7 * 1000
            ]
          },
        ]
      },
      loading:false,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleSetLineChartData(type) {
      this.loading=true
      this.lineData={
        //右侧工具箱
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          data: [ '周四', '周五', '周六', '周日','周一', '周二', '周三'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['数据1', '数据2']
        },
        series: [{
          name: '数据1',
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
          {
            name: '数据2',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#5ab1ef'
                }
              }
            },
            data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
      }
      this.radarData={
        tooltip: {
          trigger: 'item',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //右侧工具箱
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        radar: {
          radius: '66%',
              center: ['50%', '42%'],
              splitNumber: 5,
              splitArea: {
            areaStyle: {
              color: 'rgba(127,95,132,.3)',
                  opacity: 0.5,
                  shadowBlur: 45,
                  shadowColor: 'rgba(0,0,0,.5)',
                  shadowOffsetX: 0,
                  shadowOffsetY: 15
            }
          },
          name: {
            lineHeight: 12,
                formatter: (labelName, raw) => {
              return (
                  labelName
              );
            },
          },
          indicator: [
            { name: '维度1', max: 1000 },
            { name: '维度2', max: 1000 },
            { name: '维度3', max: 1000 },
            { name: '维度4', max: 1000 },
            { name: '维度5', max: 1000 },
            { name: '维度6', max: 1000 }
          ],
        },
        legend: {
          left: 'center',
              bottom: '10',
              data: ['数据1', '数据2', '数据3']
        },
        series: [
          {
            type: 'radar',
            symbolSize: 5,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: 'rgba(0,0,0,.2)',
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 0.5
              }
            },
            data: [
              {
                value: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
                name: '数据1'
              },
              {
                value: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
                name: '数据2'
              },
              {
                value: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
                name: '数据3'
              }
            ],
            animationDuration: 3000
          }]
      }
      this.pieData={
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        //右侧工具箱
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend:  {
          left: 'center',
          bottom: '10',
          data: ['数据1', '数据2', '数据3', '数据4', '数据5']
        },
        series: [
          {
            name: '名称',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '38%'],
            data: [
              { value: this.getRandomInt(), name: '数据1' },
              { value: this.getRandomInt(), name: '数据2' },
              { value: this.getRandomInt(), name: '数据3' },
              { value: this.getRandomInt(), name: '数据4' },
              { value: this.getRandomInt(), name: '数据5' }
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 1000
          }
        ]
      }
      this.mapData=[
        { name: '北京市', value: this.getRandomInt(100,10000) },
        { name: '天津市', value: this.getRandomInt(100,10000) },
        { name: '上海市', value: this.getRandomInt(100,10000) },
        { name: '重庆市', value: this.getRandomInt(100,10000) },
        { name: '河北省', value: this.getRandomInt(100,10000) },
        { name: '河南省', value: this.getRandomInt(100,10000) },
        { name: '云南省', value: this.getRandomInt(100,10000) },
        { name: '辽宁省', value: this.getRandomInt(100,10000) },
        { name: '黑龙江省', value: this.getRandomInt(100,10000) },
        { name: '湖南省', value: this.getRandomInt(100,10000) },
        { name: '安徽省', value: this.getRandomInt(100,10000) },
        { name: '山东省', value: this.getRandomInt(100,10000) },
        { name: '新疆维吾尔自治区', value: this.getRandomInt(100,10000) },
        { name: '江苏省', value: this.getRandomInt(100,10000) },
        { name: '浙江省', value: this.getRandomInt(100,10000) },
        { name: '江西省', value: this.getRandomInt(100,10000) },
        { name: '湖北省', value: this.getRandomInt(100,10000) },
        { name: '广西壮族自治区', value: this.getRandomInt(100,10000) },
        { name: '甘肃省', value: this.getRandomInt(100,10000) },
        { name: '山西省', value: this.getRandomInt(100,10000) },
        { name: '内蒙古自治区', value: this.getRandomInt(100,10000) },
        { name: '陕西省', value: this.getRandomInt(100,10000) },
        { name: '吉林省', value: this.getRandomInt(100,10000) },
        { name: '福建省', value: this.getRandomInt(100,10000) },
        { name: '贵州省', value: this.getRandomInt(100,10000) },
        { name: '广东省', value: this.getRandomInt(100,10000) },
        { name: '青海省', value: this.getRandomInt(100,10000) },
        { name: '西藏自治区', value: this.getRandomInt(100,10000) },
        { name: '四川省', value: this.getRandomInt(100,10000) },
        { name: '成都市', value: this.getRandomInt(100,10000) },
        { name: '宁夏回族自治区', value: this.getRandomInt(100,10000) },
        { name: '海南省', value: this.getRandomInt(100,10000) },
        { name: '台湾省', value: this.getRandomInt(100,10000) },
        { name: '香港特别行政区', value: this.getRandomInt(100,10000) },
        { name: '澳门特别行政区', value: this.getRandomInt(100,10000) }
      ]
      this.lineBarData={
        //y轴标题
        yTitle: [{
          type: 'value',
          name: '指标1',
          axisLabel: {
            formatter: '{value} ml'
          }
        },
          {
            type: 'value',
            name: '指标3',
            axisLabel: {
              formatter: '{value} °C'
            }
          }],
        //x轴标题
        xTitle: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        //数据项
        dataTitle: ['指标1', '指标2', '指标3', '指标4'],
        //统计数据
        series: [
          {
            name: '指标1',
            type: 'bar',
            stack: 'Ad',
            label: {
              show: true,
              formatter: (params) => parseInt(params.value)
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()
            ]
          },
          {
            name: '指标2',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C'
              }
            },
            data: [
              this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()
            ]
          },
          {
            name: '指标3',
            type: 'bar',
            stack: 'Ad',
            label: {
              show: true,
              formatter: (params) => parseInt(params.value)
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()
            ]
          },
          {
            name: '指标4',
            type: 'bar',
            label: {
              show: true,
              formatter: (params) => parseInt(params.value)
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()
            ]
          },
        ]
      }
      this.$nextTick(()=>{
        this.loading=false
      })
    },
    init() {
      this.$refs.lineChart.initChart()
      this.$refs.radarChart.initChart()
      this.$refs.pieChart.initChart()
      this.$refs.lineBarChart.initChart()
      this.$refs.mapChart.initChart()
    },
    /**
     * 生成随机整数，包含最小值和最大值
     * @param min
     * @param max
     * @returns {number}
     */
    getRandomInt(min, max) {
      if(!min){
        min=1
      }
      if(!max){
        max=1000
      }
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
